<template>
	<view v-if="recommends.length > 0">
	   <!-- 推荐 -->
	   <view class="recommend_wrap">
	   	  <view class="recommend_item" v-for="(item,index) in recommends" :key="item.id">
	   	  	  <image :src="item.thumb" mode="widthFix"></image>
	   	  </view>
	   </view>
	   <!-- 月份 -->
	   <view class="months_wrap">
	   	  <view class="months_titel">
	   	  	 <view class="months_titel_info">
				 <view class="months_info">
					 <text> {{monthesList.DD}} </text>
					 / {{monthesList.MM}} 月
				 </view>
				 <view class="months_text">{{monthesList.title}}</view>
			 </view>
			 <view class="months_titel_more">更多 > </view>
	   	  </view>
		  <view class="months_content">
			  <view class="months_content_item" v-for="item in monthesList.items" :key="item.id">
			  	  <image :src="item.thumb+item.rule.replace('$<Height>',360)" mode="aspectFill"></image>
			  </view>
		  </view>
	   </view>
	   <!-- 热门 -->
	   <view class="host_wrap">
	   	  <view class="host_titem">
	   	  	 <text> 热门 </text>
	   	  </view>
		  <view class="host_contenst">
		  	 <view class="host_item" v-for="item in hostList" :key="item.id">
		  	 	<image :src="item.thumb" mode="widthFix"></image>
		  	 </view>
		  </view>
	   </view>
	</view>
</template>

<script>
import api from "../../../util/api.js"
export default {
	data(){
		return {
			params:{    //请求推荐列表参数
				limit: 30,
				order: "hot",
				skip: 0
			},
			recommends:[],   //推荐列表
			monthesList: {},   //月份列表
			hostList:[]     //热门列表
		}
	},
	mounted() {
		this.gethomever()
	},
	methods:{
		gethomever(){
			api.getVertical(this.params).then((res)=>{
				console.log(res)
				if(res){
					this.recommends = res.res.homepage[1].items; //推荐列表
					this.monthesList = res.res.homepage[2];  //月份列表
					this.hostList = res.res.vertical;     //热门列表
					console.log(this.monthesList.items)
					//将返回的时间戳 转换成 18号/01月 格式 Moments.js
					console.log(res.res.homepage[2].stime)
					let data = new Date(res.res.homepage[2].stime);
					this.monthesList.MM = (data.getMonth() + 1 < 10 ? '0' + (data.getMonth() + 1) : data.getMonth() + 1);
					this.monthesList.DD = (data.getDate() < 10 ? '0' + (data.getDate()) : data.getDate());
				}
			})
		}
	},
	
}
</script>

<style lang="scss" scoped>
	.recommend_wrap{
		display: flex;
		flex-wrap: wrap;
		margin-top: 5px;
		.recommend_item{
			width: 50%;
			border: 6rpx solid #fff;
		}
	}
	.months_wrap{
		.months_titel{
			display: flex;
			justify-content: space-between;
		    padding: 10rpx;
			align-items: center;
			.months_titel_info{
				color: $color;
				font-size: 30rpx;
				font-weight: 600;
				display: flex;
				.months_info{
					text{
					   font-size: 36rpx;
					}
				}
				.months_text{
					font-size: 34rpx;
					color: #666;
					margin-left: 15rpx;
				}
			}
			.months_titel_more{
				color: $color;
				font-size: 24rpx;
				font-weight: 600;
			}
		}
		.months_content{
			display: flex;
			flex-wrap: wrap;
		  // display: grid;
		  // grid-template-columns: repeat(3, 33.33%);
		  // grid-template-rows: 2;
			.months_content_item{
				width: 33.33%;
				border: 5rpx solid $color;
			}
		}
	}
	.host_wrap{
		.host_titem{
			padding: 20rpx;
			text{
				font-size: 34rpx;
				font-weight: 600;
				border-left: 15rpx solid $color;
				padding-left: 20rpx;
			}
		}
		.host_contenst{
			 display: flex;
			 flex-wrap: wrap;
			.host_item{
				width: 33.33%;
				border: 5rpx solid $color;
			}
		}
	}
</style>
